<!-- 入库产品记录 -->
<template>
  <div class="pagePadding home">
    <Form inline class="formMarginBtm20 clearfix">
      <!-- 供应商名称 -->
      <FormItem>
        <span>供应商名称：</span>
        <Select placeholder="请选择" v-model="queryFrom.supplier_id" clearable filterable class="iviewIptWidth250" @on-clear="clearSupply" @on-change="getSupply">
          <Option v-for="(item, index) in supllyList" :value="item.supplier_id" :key="index">{{ item.supplier_name }}</Option>
        </Select>
      </FormItem>
      <!-- 产品名称 -->
      <FormItem class="marginLeft40">
        <span>产品名称：</span>
        <Select placeholder="请选择" v-model="queryFrom.product_name" clearable filterable class="iviewIptWidth250" :disabled="productDisable0" @on-clear="clearProduct" @on-change="getSKUSelect">
          <Option v-for="(item, index) in productSelect" :value="item.product_name" :key="index">{{ item.product_name }}</Option>
        </Select>
      </FormItem>
      <!-- 货号/SKU -->
      <FormItem class="marginLeft40">
        <span>规格/SKU：</span>
        <Select placeholder="请选择" v-model="queryFrom.specification_id_str" clearable filterable multiple :max-tag-count="queryFrom.specification_id_str.length == 1 ? 1 : 0" :disabled="productDisable" class="iviewIptWidth250">
          <Option v-for="(item, index) in SKUSelect" :value="item.specification_id" :key="index" :label="item.model_name + '-' + item.item_number">
            <span>{{ item.model_name }}</span>
            <span style="float: right; color: #ccc; margin-right: 20px;">{{ item.item_number }}</span>
          </Option>
        </Select>
      </FormItem>
      <!-- 批号 -->
      <FormItem class="marginLeft40">
        <span>批号：</span>
        <Input placeholder="请输入" v-model="queryFrom.batch_number" clearable filterable class="iviewIptWidth250"></Input>
      </FormItem>
      <!-- 入库人 -->
      <FormItem>
        <span>入库人：</span>
        <Select placeholder="请选择" v-model="queryFrom.create_by" clearable filterable class="iviewIptWidth250">
          <Option v-for="(item, index) in warehousePeople" :value="item" :key="index">{{ item }}</Option>
        </Select>
      </FormItem>
      <!-- 入库时间 -->
      <FormItem class="marginLeft40">
        <span>入库时间：</span>
        <DatePicker type="date" placeholder="请选择" class="iviewIptWidth250" format="yyyy-MM-dd" clearable @on-change="changeTime($event, 1)"></DatePicker>
        <span style="padding: 0 10px;">至</span>
        <DatePicker type="date" placeholder="请选择" class="iviewIptWidth250" format="yyyy-MM-dd" v-model="queryFrom.create_time_end" clearable :options="options" @on-change="changeTime($event, 2)"></DatePicker>
      </FormItem>
      <!-- 按钮 -->
      <FormItem class="po-create-number marginRight0" :label-width="20">
        <span class="pageBtn finger btnSure" @click="searchItem">查询</span>
        <span class="longTextBtn finger btnAdd marginLeft20" @click="exportMerge">
          <Spin style="display: inline-block;" v-show="Loading">
            <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
          </Spin>
          合并导出
        </span>
        <span class="pageBtn finger btnSure marginLeft20" @click="setupStatus = true">设置</span>
        <span class="pageBtn finger btnSure marginLeft20" @click="printing">打印</span>
      </FormItem>
    </Form>
    <!-- <Table :productList="listColumns" :productData="listData" :pages="pages" @change-page="changePage" totalText="条记录" :total="total">
      <div slot="summary" class="summary">
        总数量：<span class="color389">{{ total_number }}</span> 合计金额：<span class="color389">¥{{ total_amount }}</span>
      </div>
    </Table> -->
    <div class="clearfix tabDiv" ref="tabDiv">
      <Spin fix v-if="tabloading"></Spin>
      <Table :height="tableHeight" :productList="listColumns" :productData="listData" :option_page="option_page" highlight-row border :rowClass="rowClassName"></Table>
    </div>
    <div class="summary" v-if="listData && listData.length > 0">
      总数量：<span class="color389 marginRight20">{{ total_number }}</span> 合计金额：<span class="color389">{{ $utils.formatMoney(total_amount, true) }}</span>
    </div>
    <div class="pages" v-if="listData !== null && listData.length > 0 && total">
      <Page v-if="pages && total <= 60" :total="total" :current="pages.page" @on-change="changePage" class="fl" />
      <Page v-if="pages && total > 60" :total="total" :current="pages.page" @on-change="changePage" show-elevator class="fl" />
      <div class="fr totalFont" v-if="total">共计{{ total }}条记录</div>
    </div>
    <!-- <div style="position: relative; border: 1px solid #e8eaec; height: 500px; border-top: none !important;" class="clearfix noData" v-if="listData !== null && listData.length == 0">
      <img style="margin-top: 100px;" src="@/assets/images/tableNoData.png" />
    </div> -->
    <!-- 动态表头弹窗 -->
    <table-setup v-if="setupStatus" :pageList="titleList" :option_page="option_page" @cancleBtn="setupStatus = false" @sureBrn="sureSetup"></table-setup>
    <Modal v-model="status" title="请选择模版" cancel-text @on-cancel="status = false" width="568">
      <div class="clearfix paddingBot40px">
        <div class="item">
          <span class="itemTitle">模版类型：</span>
          <Select placeholder="请选择" v-model="template_type" filterable class="iviewIptWidth307" @on-change="typeChange">
            <Option v-for="(item, index) in TemplateList" :value="item.typeID" :key="index">{{ item.typeName }}</Option>
          </Select>
        </div>
        <div class="item">
          <span class="itemTitle">模版名称：</span>
          <Select placeholder="请选择" v-model="template_id" filterable class="iviewIptWidth307" :disabled="!template_type">
            <Option v-for="(item, index) in typeList" :value="item.template_id" :key="index">{{ item.template_name }}</Option>
          </Select>
        </div>
        <!-- <div class="item">
          <span class="itemTitle">每页行数：</span>
          <InputNumber  :min="0" :precision="0" v-model="paging" :active-change="false"  class="iviewIptWidth307"></InputNumber>
        </div> -->
      </div>
      <div slot="footer">
        <span class="pageBtn finger btnSure" @click="surePrint">确定</span>
      </div>
    </Modal>
  </div>
</template>

<script>
import TableSetup from '@/components/tableSetup'
import Table from '@/components/table'
export default {
  name: 'recordIncomingProducts',
  components: {
    Table,
    TableSetup,
  },
  data() {
    return {
      tabloading: false,
      Loading: false,
      tableHeight: 0,
      TemplateList: [
        { typeName: '采购单', typeID: 1 },
        { typeName: '收货验收单', typeID: 2 },
        { typeName: '入库单', typeID: 3 },
        { typeName: '销售单', typeID: 4 },
        { typeName: '拣货单', typeID: 5 },
        { typeName: '出库单', typeID: 6 },
        { typeName: '采购记录', typeID: 7 },
        { typeName: '收货验收记录', typeID: 8 },
        { typeName: '入库记录', typeID: 9 },
        { typeName: '销售记录', typeID: 10 },
        { typeName: '拣货记录', typeID: 11 },
        { typeName: '出库记录', typeID: 12 },
        { typeName: '调拨单', typeID: 13 },
      ],
      template_id: '',
      template_type: 9,
      typeList: [],
      status: false,
      supllyList: [],
      titleList: [],
      option_page: '05',
      // 动态表头弹窗
      setupStatus: false,
      // 表格数据
      listData: [],
      // 表格头部标题
      listColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 75,
        },
        {
          title: '产品名称',
          key: 'product_name',
          align: 'center',
          width: 260,
        },
        {
          title: '注册证号/备案凭证号',
          key: 'licence_code',
          align: 'center',
          width: 230,
        },
        {
          title: '规格型号',
          key: 'model_name',
          align: 'center',
          width: 136,
        },
        {
          title: '货号/SKU',
          key: 'item_number',
          align: 'center',
          width: 136,
        },
        {
          title: '条形码',
          key: 'bar_code',
          align: 'center',
          width: 200,
        },
        {
          title: '批号',
          key: 'batch_number',
          align: 'center',
          width: 200,
        },
        {
          title: '有效期',
          key: 'valid_period',
          align: 'center',
          width: 136,
        },
        {
          title: '厂家',
          key: 'factory_name',
          align: 'center',
          width: 260,
        },
        {
          title: '数量',
          key: 'quantity',
          align: 'center',
          width: 160,
        },
        {
          title: '入库人',
          key: 'create_by',
          align: 'center',
          width: 260,
        },
        {
          title: '入库时间',
          key: 'create_time',
          align: 'center',
          width: 136,
        },
        {
          title: '入库仓库',
          key: 'warehouse_name',
          align: 'center',
          width: 136,
        },
      ],
      // 查询参数
      queryFrom: {
        specification_id_str: '',
        product_name: '', // 产品名称
        model_name: '', // 规格名称
        item_number: '', // 货号
        batch_number: '', // 批号
        create_by: '', // 入库人
        create_time_start: '', // 起始入库时间
        create_time_end: '', // 截止入库时间
      },
      /* 搜索对象，分页时需要 */
      searchObj: {},
      pages: {
        rows: 10,
        page: 1,
      },
      total: 0,
      // 条目总数
      total_amount: 0 /* 合计金额 */,
      total_number: 0 /* 合计数量 */,
      // 入库人下拉
      warehousePeople: [],
      // 产品下拉
      productSelect: [],
      // 产品规格下拉
      SKUSelect: [],
      // 规格id
      code_id: '',
      // 产品id
      product_id: 0,
      // 时间设置
      options: {},
      // 规格选择禁用
      productDisable: true,
      productDisable0: true,
      paging: null,
    }
  },
  methods: {
    printing() {
      this.status = true
      this.getTemplate()
    },
    // 获取最近的模板
    getTemplate() {
      // 获取模板名称
      this.$http.get(this.$api.templateInfo, { template_type: this.template_type }, false).then(res => {
        this.typeList = res.data
        console.log(this.typeList, '数据')
      })
      // 获取模板记录
      this.$http.get(this.$api.recentTemplate, { template_type: this.template_type }, true).then(res => {
        if (res.data) {
          this.template_id = res.data.template_id
        }
      })
    },
    getSupllyList() {
      this.$http.get(this.$api.warehouseReceiptProductsSkuList, false).then(res => {
        console.log(res)
        this.supllyList = res.data
      })
    },
    surePrint() {
      let api_info = `${this.$api.inputProductRecode.url}?`
      for (let objName in this.queryFrom) {
        if (this.queryFrom[objName]) {
          api_info = api_info + `${objName}=${this.queryFrom[objName]}&`
        }
      }
      if (!this.template_type) {
        this.$Message.warning('请选择模版类型')
        return
      }
      if (!this.template_id) {
        this.$Message.warning('请选择模版名称')
        return
      }
      this.$http.downFile(this.$api.templatePrint, { template_id: this.template_id, api_info: api_info, paging: this.paging }, true).then(res => {
        this.status = false
        this.$Message.success('导出成功')

        let blob = new Blob([res.data], { type: 'application/x-xlsx' })
        const aLink = document.createElement('a')
        aLink.href = URL.createObjectURL(blob)
        aLink.download = '入库产品记录.xlsx'
        aLink.click()
      })
    },
    // 发送请求获取 模版名称
    typeChange(e) {
      if (!e) return
      this.$http.get(this.$api.templateInfo, { template_type: e }, false).then(res => {
        this.typeList = res.data
      })
    },
    sureSetup(val) {
      this.queryOption()
    },
    // 获取表格表头
    queryOption() {
      this.tabloading = true
      this.$http
        .get(this.$api.systemOptionItem, { option_page: this.option_page })
        .then(res => {
          this.titleList = res.data.enable
          localStorage.setItem('adminTtitleList', JSON.stringify(res.data.list))
          for (let i = 0; i < this.titleList.length; i++) {
            if (this.titleList[i].show) {
              this.titleList[i].key = this.titleList[i].data_col
              this.titleList[i].width = this.titleList[i].column_width
              this.titleList[i].align = 'center'
              this.titleList[i].resizable = true
            }
          }
          this.listColumns = []
          this.listColumns.unshift({
            title: '序号',
            type: 'index',
            align: 'center',
            width: 60,
          })
          this.listColumns = [...this.listColumns, ...this.titleList]
          this.listColumns = JSON.parse(JSON.stringify(this.listColumns))
        })
        .then(() => {
          this.getTableList(this.pages, {})
        })
    },
    // 合并导出
    exportMerge() {
      this.code_id = this.queryFrom.specification_id_str.length != 0 ? this.queryFrom.specification_id_str.join(',') : null
      let data = {
        supplier_id: this.queryFrom.supplier_id,
        product_name: this.queryFrom.product_name,
        batch_number: this.queryFrom.batch_number,
        create_by: this.queryFrom.create_by,
        create_time_start: this.queryFrom.create_time_start,
        create_time_end: this.queryFrom.create_time_end,
        specification_id_str: this.code_id,
      }
      this.Loading = true
      this.$http.downFile(this.$api.gspWarehouseRecrpitLineExport, data).then(res => {
        this.Loading = false
        let blob = new Blob([res.data], { type: 'application/x-xlsx' })
        const aLink = document.createElement('a')
        aLink.href = URL.createObjectURL(blob)
        aLink.download = '入库产品记录导出表.xlsx'
        aLink.click()
      }).catch(err => {
        this.Loading = false
      })
    },
    // 反冲成功的行标红
    rowClassName(row, index) {
      if (row.recoil_status == 1) return 'redRow'
      return ''
    },
    /* 获取表格数据 */
    getTableList(pages, searchItem) {
      this.tabloading = true
      let obj = {}
      Object.assign(obj, pages, searchItem)
      this.$http.get(this.$api.inputProductRecode, obj, false).then(res => {
        this.tabloading = false
        if (res.status) {
          this.listData = res.data.result
          this.total = res.data.total_count
          this.total_amount = res.data.tota_amount
          this.total_number = res.data.total_quantity
          // 处理动态表头页面列表数据
          this.listData = this.$utils.dynamicHeaderList(this, this.listData)
          this.$nextTick(() => {
            this.tableHeight = this.$refs.tabDiv.offsetHeight + ''
          })
        }
      })
    },
    /* 分页方法 */
    changePage(e) {
      this.pages.page = e
      this.getTableList(this.pages, this.searchObj)
    },
    /* 搜索产品 */
    searchItem() {
      let obj = {}
      obj.product_name = this.queryFrom.product_name
      obj.model_name = this.queryFrom.model_name
      obj.item_number = this.queryFrom.item_number
      obj.batch_number = this.queryFrom.batch_number
      obj.create_by = this.queryFrom.create_by
      obj.create_time_start = this.queryFrom.create_time_start
      obj.create_time_end = this.queryFrom.create_time_end
      obj.supplier_id = this.queryFrom.supplier_id
      obj.specification_id_str = this.queryFrom.specification_id_str
      this.searchObj = obj
      this.pages = { page: 1, rows: 10 }
      this.getTableList(this.pages, obj)
    },
    // 获取入库人下拉
    getWarehousePeople() {
      this.$http.get(this.$api.gspWarehouse_receiptCreate_by, { }).then(res => {
        this.warehousePeople = res.data
      })
    },
    /* 获取下拉列表 */
    getSelect() {
      // 获取产品名称下拉
      this.$http.get(this.$api.productShow, { search_type: '1' }).then(res => {
        if (res.status) {
          this.productSelect = res.data
        }
      })
    },
    getSupply() {
      if (this.queryFrom.supplier_id) {
        this.productDisable0 = false
        let data = {
          supplier_id: this.queryFrom.supplier_id,
        }
        this.$http.get(this.$api.warehouseReceiptProductsSkuList, data).then(res => {
          if (res.status) {
            this.productSelect = res.data
          }
        })
      }
    },
    clearSupply() {
      this.productDisable0 = true
      this.productDisable = true
      this.queryFrom.supplier_id = null
      this.queryFrom.product_name = null
      this.queryFrom.specification_id_str = ''
      this.SKUSelect = []
    },
    clearProduct() {
      // this.productDisable0=true
      this.productDisable = true
      this.queryFrom.product_name = null
      this.queryFrom.specification_id_str = ''
      this.SKUSelect = []
    },
    clearsku() {
      this.productDisable = true
      this.queryFrom.specification_id_str = null
    },
    // 获取产品规格下拉
    getSKUSelect(val) {
      if (this.queryFrom.supplier_id && this.queryFrom.product_name) {
        this.productDisable = false
        // let product_id = ''
        // this.productSelect.forEach(item => {
        //    if(val == item.product_name) {
        //      product_id = item.product_id
        //    }
        // })
        let data = {
          supplier_id: this.queryFrom.supplier_id,
          product_name: val,
        }
        this.$http.get(this.$api.warehouseReceiptProductsSkuList, data).then(res => {
          this.SKUSelect = res.data
          this.queryFrom.specification_id_str = ''
        })
      }
    },
    // 时间改变
    changeTime(e, num) {
      if (num == 1) {
        let that = this
        that.queryFrom.create_time_start = e
        that.queryFrom.create_time_end = ''
        that.options = {
          disabledDate(date) {
            return date && date.valueOf() < new Date(that.queryFrom.create_time_start)
          },
        }
      } else {
        this.queryFrom.create_time_end = e
      }
    },
  },
  created() {
    this.getSupllyList()
    this.queryOption()
    this.getSelect()
    this.getWarehousePeople()
  },
}
</script>

<style scoped lang="less">
.home {
  display: flex;
  flex-direction: column;
}
// 表格
.tabDiv {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  .totalFont {
    font-size: 14px;
  }
  .pages {
    margin-top: 10px;
    overflow: hidden;
    line-height: 32px;
  }
}
.paddingBot40px {
  padding-bottom: 40px;
}
.item {
  display: flex;
  align-items: center;
  justify-items: center;
  margin-bottom: 20px;
  .itemTitle {
    width: 100px;
    color: #000;
    text-align: justify;
    height: 32px;
    line-height: 32px;
  }
  .itemTitle::after {
    content: '';
    display: inline-block;
    padding-left: 100%;
  }
}
</style>
